import React, { Component } from "react";
import { NavBar, Icon } from 'antd-mobile';
import { Tabs } from 'antd-mobile';
import { Accordion } from 'antd-mobile';

const tabs = [
    { title: '资产计算' },
    { title: '收益计算' },
    { title: '更新时间' },
    { title: '其他' }
];

export default class HelpCenter extends Component {
    state = {
        disabled: false,
    }

    onChange = (key) => {
        console.log(key);
    }

    render() {
        return (
            <div className="helpCenter-div">
                <div>
                    <NavBar
                        mode="light"
                        icon={<Icon type="left" />}
                        onLeftClick={() => window.location.href = '#/terran/helpCenter'}
                        rightContent={[
                            <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
                            <Icon key="1" type="ellipsis" />,
                        ]}
                    >帮助中心</NavBar>
                </div>

                <div>
                    <h2>&nbsp;收益相关问题</h2>
                    <Tabs tabs={tabs}
                        initialPage={0}
                        onChange={(tab, index) => { console.log('onChange', index, tab); }}
                        onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
                    >
                        <div className="资产计算">
                            <div style={{ marginTop: 10, marginBottom: 10 }}>
                                <Accordion defaultActiveKey="" className="my-accordion" onChange={this.onChange}>
                                    <Accordion.Panel header="1. 什么是总资产？" className="pad">
                                        <div style={{ marginTop: 10, marginLeft: 20, marginBottom: 10, marginRight: 10, color: "#999999" }}>
                                            答：总资产就是当前您所有持仓资产加上申购在途资产构成。
                                        </div>
                                    </Accordion.Panel>
                                </Accordion>
                                <Accordion defaultActiveKey="" className="my-accordion" onChange={this.onChange}>
                                    <Accordion.Panel header="2. 什么是买入在途资产？" className="pad">
                                        <div style={{ marginTop: 10, marginLeft: 20, marginBottom: 10, marginRight: 10, color: "#999999" }}>
                                            答：您当前已经进行过认购、申购或者定投的基金待确认份额的资产，加上红利再投待确认份额资产，就是您的买入在途资产。
                                        </div>
                                    </Accordion.Panel>
                                </Accordion>
                            </div>
                        </div>

                        <div className="收益计算">
                            <div style={{ marginTop: 10, marginBottom: 10 }}>
                                <Accordion defaultActiveKey="" className="my-accordion" onChange={this.onChange}>
                                    <Accordion.Panel header="1. 基金购买后收益从哪天开始算？" className="pad">
                                        <div style={{ marginTop: 10, marginLeft: 20, marginBottom: 10, marginRight: 10, color: "#999999" }}>
                                            答：基金一般是您申购后T+1个交易日确认，收益也是自确认日开始产生的，一般在确认日的19:00-23:00之间您即可查看到当日收益。QDII基金和FOF基金顺延会1个交易日确认，养老目标基金则会顺延2个交易日确认，但请您以实际更新时间为准。（T为交易日）
                                        </div>
                                    </Accordion.Panel>
                                </Accordion>
                                <Accordion defaultActiveKey="" className="my-accordion" onChange={this.onChange}>
                                    <Accordion.Panel header="2.  基金卖出后收益从哪天开始不计算？" className="pad">
                                        <div style={{ marginTop: 10, marginLeft: 20, marginBottom: 10, marginRight: 10, color: "#999999" }}>
                                            答：若您在基金交易日15：00之前申请卖出则按照当天的净值确认，交易日当天即为T日；若您在交易日15：00以后或非交易日申请卖出，则按照下一个交易日的净值确认，下一个交易日即为T日，T日为收益计算截止日。
                                        </div>
                                    </Accordion.Panel>
                                </Accordion>
                            </div>
                        </div>

                        <div className="更新时间">
                            <div style={{ marginTop: 10, marginBottom: 10 }}>
                                <Accordion defaultActiveKey="" className="my-accordion" onChange={this.onChange}>
                                    <Accordion.Panel header="1. 基金收益在什么时候更新？" className="pad">
                                        <div style={{ marginTop: 10, marginLeft: 20, marginBottom: 10, marginRight: 10, color: "#999999" }}>
                                            答：基金一般每个交易日更新日收益,一般交易日19:00-23:00即可查看当天日收益，而QDII基金只能查看前一个交易日的日收益，月结型货币基金和理财型基金等特殊类型的基金，以实际更新为准。
                                        </div>
                                    </Accordion.Panel>
                                </Accordion>
                                <Accordion defaultActiveKey="" className="my-accordion" onChange={this.onChange}>
                                    <Accordion.Panel header="2. 储蓄罐活期什么时间发放收益？" className="pad">
                                        <div style={{ marginTop: 10, marginLeft: 20, marginBottom: 10, marginRight: 10, color: "#999999" }}>
                                            答：储蓄罐活期在次自然日10:00发放上一个自然日的收益。
                                        </div>
                                    </Accordion.Panel>
                                </Accordion>
                            </div>
                        </div>

                        <div className="其他">
                            <div style={{ marginTop: 10, marginBottom: 10 }}>
                                <Accordion defaultActiveKey="" className="my-accordion" onChange={this.onChange}>
                                    <Accordion.Panel header="1. 基金收益由什么组成的？" className="pad">
                                        <div style={{ marginTop: 10, marginLeft: 20, marginBottom: 10, marginRight: 10, color: "#999999" }}>
                                            答：基金收益由市值波动损益、现金分红、并扣除认/申购、赎回、转换手续费组成。
                                        </div>
                                    </Accordion.Panel>
                                </Accordion>
                                <Accordion defaultActiveKey="" className="my-accordion" onChange={this.onChange}>
                                    <Accordion.Panel header="2. 为什么我计算的收益和你们显示的不一样？" className="pad">
                                        <div style={{ marginTop: 10, marginLeft: 20, marginBottom: 10, marginRight: 10, color: "#999999" }}>
                                            答：基金分红以及申赎、转换、赎回转投等费用均会影响收益，若您对收益有疑问可直接咨询在线客服，或拨打客服电话400-700-9665。
                                        </div>
                                    </Accordion.Panel>
                                </Accordion>
                                <Accordion defaultActiveKey="" className="my-accordion" onChange={this.onChange}>
                                    <Accordion.Panel header="3. 基金卖出的收益截止日是哪天？" className="pad">
                                        <div style={{ marginTop: 10, marginLeft: 20, marginBottom: 10, marginRight: 10, color: "#999999" }}>
                                            答：基金交易日15:00之前的卖出申请按照当天的净值确认；交易日15:00以后的卖出申请和非交易日的申请，按照下一个交易日的净值确认。                                        </div>
                                    </Accordion.Panel>
                                </Accordion>
                            </div>
                        </div>
                    </Tabs>
                </div>
            </div>
        );
    }
}
